<template>
    <div class="fill_all">
        <div class="half">
            <div class="title">设备11010</div>
            <ul class="weather-forecast">
                <li class="forecast-item">
                    <h2>星期四</h2>
                    <p class="temperature">20~25℃</p>
                    <p class="wind-info">东风3级</p>
                </li>
                <li class="forecast-item">
                    <h2>星期五</h2>
                    <p class="temperature">20~25℃</p>
                    <p class="wind-info">东风3级</p>
                </li>
            </ul>
            <div class="remain_d" ref="TDom"></div>
        </div>
        <div class="half">
            <div class="title">气象分析图</div>
            <div class="remain" ref="remain"></div>
        </div>
    </div>
</template>
<script>
import * as $echarts from 'echarts'
const eCharIns = {}
export default {

    data() {
        return {

        }
    },
    watch: {

    },
    mounted() {
        this.$nextTick(_ => {
            setTimeout(() => {
                this.initChart()
            }, 500)
        })
    },
    beforeUnmount() {
        // for(const i of eCharIns) {
        //     if (eCharIns[i]) {
        //         eCharIns[i].dispose()
        //         delete eCharIns[i]
        //     }
        // }
    },
    methods: {
        initChart() {
            const refDOm = $echarts.getInstanceByDom(this.$refs.remain)
            if (!refDOm) {
                eCharIns.remain = $echarts.init(this.$refs.remain, null, { renderer: 'svg' })
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        formatter(params) {
                            return (
                                params[0].axisValue +
                                '<br />' +
                                params[0].marker +
                                params[0].value +
                                ' ℃' + '<br />' +
                                params[1].marker +
                                params[1].value + ' kPa'
                            )
                        }
                    },
                    legend: {
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '4%',
                        bottom: '30px',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2024-02-11', '2024-02-12', '2024-02-13', '2024-02-14', '2024-02-15'],
                        axisLabel: {
                            color: '#fff'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            color: '#fff'
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "rgba(135,140,147,0.8)",
                            },
                        }
                    },
                    series: [
                        {
                            name: '气温',
                            type: 'line',
                            data: [23, 29, 33, 27, 24],
                            lineStyle: {
                                color: '#3cfffa'
                            }
                        },
                        {
                            name: '大气压',
                            type: 'line',
                            data: [100, 101, 101, 99, 100],
                            lineStyle: {
                                color: '#73ff3c'
                            }
                        }
                    ]
                }
                eCharIns.remain.setOption(option);
            }

            const TemDOm = $echarts.getInstanceByDom(this.$refs.TDom)
            if (!TemDOm) {
                eCharIns.TDom = $echarts.init(this.$refs.TDom, null, { renderer: 'svg' })
                const option = {
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            splitLine: {
                                show: false
                            },
                            minorSplitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            minorTick: {
                                show: false
                            },
                            axisLabel: {
                                color: '#9ec1ff'
                            },
                            data: ['10时', '11时', '12时', '13时', '14时']
                        },
                        {
                            type: 'category',
                            boundaryGap: false,
                            splitLine: {
                                show: false
                            },
                            minorSplitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                color: '#9ec1ff'
                            },
                            minorTick: {
                                show: false
                            },
                            data: ['东风1级', '东北风2级', '东南风3级', '西南风2级', '西风4级']
                        },
                    ],
                    yAxis: {
                        type: 'value',
                        show: false
                    },
                    series: [
                        {
                            name: '',
                            type: 'line',
                            data: [20, 20, 20, 20, 20, 20, 20],
                            lineStyle: {
                                color: '#499fff'
                            },
                        },
                        {
                            name: '风向',
                            type: 'line',
                            data: [40, 40, 40, 40, 40, 40, 40],
                            lineStyle: {
                                color: 'transparent'
                            },
                            symbolSize: 0,
                            itemStyle: {

                            },
                            opacity: 0
                        }
                    ]
                }
                eCharIns.TDom.setOption(option);
            }
        }
    }
}
</script>
<style scoped lang="scss">
* {
    padding: 0;
    margin: 0;
}

$bgcolor: #01324a;

.fill_all {
    width: 100%;
    height: 100%;
    color: #000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

.half {
    flex: 1;
    background-color: #0a212c;
    border-radius: 10px;
    box-shadow: 2px 0 2px #ccc;
    color: #fff;
}

.title {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    color: #cda9ff;
    text-indent: 1em;
    font-style: italic;
    font-weight: 700;
}

.weather-forecast {
    height: 80px;
    display: flex;
    justify-content: space-around;
    margin: 10px 0;
}

.forecast-item {
    border: 1px solid #c7ff81;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
}

h2 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    color: #40d293;
}

.temperature {
    font-size: 1.1em;
    font-weight: bold;
    color: #59a40d;
}

.wind-info {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

.remain {
    height: calc(100% - 30px);
}

.remain_d {
    height: calc(100% - 190px);
    margin-top: 30px;
}
</style>